<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Doctor Home Page</title>
<link href="assistantmain.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="assistantmain.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script src="../js/jquery-1.11.1.js"></script>
<script>
	var oldlist = null;

	$(document).ready(function() {

		$("#tabs1").click(function() {
			$("#tabs1List").slideToggle("slow");
		});

	});
</script>

</head>
<body>
	<div id="userinfo">
		<div id="useravatar">
			<img width="150px" height="120px" style="margin-top:15px" alt=""
				src="../images/avatar/Juli.jpg">
		</div>
		<div id="userdetails">
			<table>
				<tr>
					<td colspan="4" height="15px"></td>
				</tr>
				<tr>
					<td>Name:</td>
					<td width="200px"><input class="outbox" id="username"
						name="username" type="text" size="15" readonly="readonly" /></td>
					<td>Role:</td>
					<td><input class="outbox" id="role" name="role" type="text"
						size="15" readonly="readonly" /></td>
				</tr>
				<tr>
					<td colspan="4" height="15px"></td>
				</tr>
				<tr>
					<td>Date:</td>
					<td colspan="2"><input class="outbox" id="currdate"
						name="currdate" type="text" size="12" readonly="readonly" /></td>
					<td><input type="hidden" class="outbox" id="hospitalid" name="hospitalid" 
						size="15" /></td>							
				</tr>
			</table>
		</div>
		<div id="calendar"></div>
		<div id="signout"><a href="loginsystem.html">Sign Out</a></div>
	</div>
	<div id="tabs">
		<div id="tabstitle">
			<div id="tabs1" class="tabMenu">
				<a href="#">Doctor Schedule</a>
			</div>
			<div id="tabs1List" class="tabsList">
				<div id="tab1button1" class="sublist">
					<a href="#">Schedule View</a>
				</div>
			</div>
		</div>
		<div id="tabsbody">
			<div id="tab1button0page" class="tabpage" style="z-index: 1"></div>
			<div id="tab1button1page" class="tabpage">
				<fieldset id="div_serach" >
					<legend>Search:</legend>
					<form id="hpt_search_form" method="post" action="../QueryScheduleListServlet">	
						<table class="search_schedule">		
							<tr>
								<td><label> Date From: <br/><input type="text" id="startDate" name="startDate" size="15" /></label></td>
								<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td colspan="4" ><label> Date To: <br/><input type="text" id="endDate" name="endDate" size="15" /></label></td>							
							</tr>	
							<tr>
								<td><label> Doctor ID: <br/><input type="text" id="doctorid" name="doctorid" size="15" /></label></td>
								<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td><label> Doctor Name: <br/><input type="text" id="nameselected" name="nameselected" placeholder="input or select" size="40" /></label></td>	
								<td><br/><select name="doctorname" id="doctorname" onchange="getDocName()"></select></td>	
								<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td><br/><input type="button" class="mybutton" id="searchSchedule"
										value="Search" onclick="QueryScheduleList()"/> </td>						
							</tr>					
						</table>
					</form>
				</fieldset>		
				<div id="div_schedule">	
					<span>Schedule List:</span>	
					<div id="div_schedule_table" style="overflow:scroll;height:550px;"></div>	
				</div>
			</div>	
		</div>
	</div>	
	<div id="schedule_filter">
		<div id="schedule_view">
			<div id="schedule_view_title" style="color:white;background-color:#4484B2;">		
				<img src="../images/Logos/closewindows.png" alt="" width="15px" height="15px" border="1px solid grey" onclick="reloadSchedulePage()" style="float:right"/>
				<span><b>Make An Appointment</b></span>
			</div>
			<div id="schedule_view_body" >
				<div id="doctorinfo">
					<label> Doctor Name: <input type="text" id="info_doctorname" name="info_doctorname" size="40" /></label>
					<label> Doctor ID: <input type="text" id="info_doctorid" name="info_doctorid" size="15" /></label>		
					<label> Date: <input type="text" id="info_date" name="info_date" size="15" /></label>								
				</div>
				<div style="margin-top:15px;color:white;background-color:#C2BFBF;padding:1%"><b>Schedule Details:</b>
					<div id="available_schedule" style="overflow:scroll;height:400px;"></div>	
				</div>			
			</div>
		</div>
	</div>
	<div id="makeappt_filter">
		<div id="makeappt_view">
			<fieldset id="div_makeappt" >
				<legend>Appointment Information:</legend>
				<form id="makeappt_form" method="post" action="">	
					<table class="makeappt_table">		
						<tr>
							<td><label> Appointment Date: <input type="text" id="appt_Date" name="apptDate" size="15" readonly="readonly"/></label></td>
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
							<td colspan="4" ><label> Appointment Time: <input type="text" id="appt_Time" name="apptTime" size="15" readonly="readonly"/></label></td>							
						</tr>	
						<tr>
							<td><label> Doctor Name: <input type="text" id="appt_DoctorName" name="apptDoctorName" size="40" readonly="readonly"/></label></td>
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
							<td><input type="hidden" id="appt_ScheduleId" name="apptScheduleId"/> </td>							
						</tr>					
					</table>						
				</form>
			</fieldset>				
			<label style="margin-top:30px; margin-left:10px;"> Patient ID: <input type="text" id="appt_PatientId" name="apptPatientId" size="15" />
			<input type="hidden" id="appt_PatientName" name="apptPatientName" size="40" />	</label>
										
			<p>
			<input type="button" class="mybutton2" id="makeappt"
				value="Make an Appointment" onclick="makeAppointment()"/> 
			<input type="button" class="mybutton2" id="cancelappt"
				value="Cancel an Appointment" onclick="sendCancelAppointmentRequest()"/> 											
			<input type="button" class="mybutton2" id="closeapptpage" 
				value="Close" onclick="cancelMakeAppointmentPage()"/>	
			</p>			
		</div>
	</div>						
</body>
</html>